<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>upload video demo</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet">
  <link href="./css/view.css" rel="stylesheet">
  <link href="./css/editor.css" rel="stylesheet">
  <link href="../dist/css/style.css" rel="stylesheet">
</head>

<body>
  <p>
    Upload video
  </p>

  <!-- 编辑器 -->
  <div>
    <div id="editor-toolbar" class="editor-toolbar"></div>
    <div id="editor-text-area" class="editor-text-area"></div>
  </div>


  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="js/init-content.js"></script>
  <script src="../dist/index.js"></script>
  <script>
    const E = window.wangEditor

      // 切换语言
      const LANG = location.href.indexOf('lang=en') > 0 ? 'en' : 'zh-CN'
      E.i18nChangeLanguage(LANG)

    const editorConfig = { MENU_CONF: {} }
    editorConfig.MENU_CONF['insertVideo'] = {
      onInsertedVideo(videoNode) {
        console.log('inserted video', videoNode)
      },
    }
    editorConfig.MENU_CONF['uploadVideo'] = {
      server: 'http://106.12.198.214:3000/api/upload-video',
      // server: 'http://106.12.198.214:3000/api/upload-img-failed', // 用于测试 failed
      // server: 'http://106.12.198.214:3000/api/xxx', // 用于测试 404

      timeout: 5 * 1000, // 5s

      fieldName: 'custom-fileName',
      meta: { token: 'xxx', a: 100 },
      metaWithUrl: true, // 参数拼接到 url 上
      headers: { Accept: 'text/x-json' },

      maxFileSize: 10 * 1024 * 1024, // 10M

      onBeforeUpload(files) {
        console.log('onBeforeUpload', files)

        return files // 返回哪些文件可以上传
        // return false // 会阻止上传
      },
      onProgress(progress) {
        console.log('onProgress', progress)
      },
      onSuccess(file, res) {
        console.log('onSuccess', file, res)
      },
      onFailed(file, res) {
        alert(res.message)
        console.log('onFailed', file, res)
      },
      onError(file, err, res) {
        alert(err.message)
        console.error('onError', file, err, res)
      },

      // // 用户自定义插入视频
      // customInsert(res, insertFn) {
      //   console.log('customInsert', res)
      //   const imgInfo = res.data || {}
      //   const { url } = imgInfo
      //   if (!url) throw new Error(`Video url is empty`)

      //   // 自己插入视频
      //   console.log('自己插入视频', url)
      //   insertFn(url)
      // },

      // // 用户自定义上传视频
      // customUpload(file, insertFn) {
      //   console.log('customUpload', file)

      //   return new Promise((resolve) => {
      //     // 插入一张视频，模拟异步
      //     setTimeout(() => {
      //       const src = `https://www.w3school.com.cn/i/movie.ogg`
      //       insertFn(src)
      //       resolve('ok')
      //     }, 500)
      //   })
      // },

      // // 自定义选择视频（如图床）
      // customBrowseAndUpload(insertFn) {
      //   alert('自定义选择视频，如弹出图床')

      //   // 插入一张视频，模拟异步
      //   setTimeout(() => {
      //     const src = '<iframe src="//player.bilibili.com/player.html?aid=250348909&bvid=BV1Pv411w7Xr&cid=401518678&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>'
      //     insertFn(src)
      //   }, 500)
      // },
    }

    const editor = E.createEditor({
      selector: '#editor-text-area',
      html: '<p>Upload video...</p><p><br></p>',
      config: editorConfig
    })

    const toolbar = E.createToolbar({
      editor,
      selector: '#editor-toolbar',
      // config: {}
    })
  </script>
</body>

</html>